<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml"
      xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>过渡：Vue在插入、更新或者移除DOM时，提供多种不同方式的应用过渡效果</title>
    <!-- Vue提供了内置的过渡封装组件，该组件用于包裹要实现过渡效果的组件 -->
    <script src="../../js/vue.js"></script>
    <style>
      /* 可以设置不同的进入和离开动画 */
      /* 设置持续时间和动画函数 */
      .fade-enter-active, .fade-leave-active {
        transition: opacity 2s
      }
      .fade-enter, .fade-leave-to {
        opacity: 0;
      }

      /*
      过渡就是一个淡入淡出的效果，Vue在元素显示与隐藏的过渡中，提供6个class来切换：
        v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
        v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
        v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。
        v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
        v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
        v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。
       */

    </style>
</head>
<body>
  <div id="databinding">
    <button v-on:click="show = !show">点我</button>
    <!-- 对过渡中切换的类名而言，如果使用一个没有名字的<transition>，则v-是类名的默认前缀，
      如果修改成<transition name="fade">，name中的值，自己随意定义，那么 v-enter 会替换为 fade-transition-enter -->
    <transition name="fade">
      <p v-show="show" v-bind:style="styleobj">动画实例</p>
    </transition>
  </div>

  <script type="text/javascript" >
    // 通过点击“点我”按钮将变量show的值从true改变成false，为true时显示p标签
    var vm = new Vue({
      el:'#databinding',
      data:{
        show:true,
        styleobj:{
          fontSize:'30px',
          color:'red'
        }
      },
      methods:{}
    });
  </script>
</body>
</html>
